<template>
  <div class="home">
    <div class="body">
      <div class="content">
        <a-list
          item-layout="vertical"
          size="large"
          :pagination="false"
          :data-source="listData"
        >
          <template #renderItem="{ item }">
            <a-list-item key="item.title">
              <template #actions>
                <span @click="gotoUserPage(item)">
                  {{ item.author }}
                </span>
                <span id="collection" @click="collection(item)">
                  <StarOutlined />
                  {{ item.collectionNum }}
                </span>
                <span id="likes" @click="like(item)">
                  <LikeOutlined />
                  {{ item.likeNum }}
                </span>
                <span>
                  <MessageOutlined />
                  {{ item.commentNum }}
                </span>
                <span>
                  <EyeOutlined />
                  {{ item.viewNum }}
                </span>
              </template>
              <template #extra>
                <span v-if="item.coverImg != null">
                  <img width="180" alt="logo" :src="item.coverImg" />
                </span>
                <span v-else></span>
              </template>
              <a-list-item-meta :description="item.description">
                <template #title>
                  <a-tag color="cyan">标签</a-tag>
                  <span id="AsTitle" @click="gotoContent(item)">
                    {{ item.title }}
                  </span>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <div class="sider">
        <a-collapse
          v-model:activeKey="activeKey"
          :bordered="false"
          style="background: #edf9ff"
        >
          <a-collapse-panel
            key="1"
            header="博文分类"
            style="background: #edf9ff"
          >
            <p style="display: flex; justify-content: space-between">
              <span>小说</span>
              <span>科技</span>
              <span>教育</span>
            </p>
            <p style="display: flex; justify-content: space-between">
              <span>社会</span>
              <span>美食</span>
              <span>艺术</span>
            </p>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="联系我们" :disabled="false">
            <p id="AsTitle">广告投放</p>
            <p id="AsTitle" @click="talkToAdmin">网站改进建议</p>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  EyeOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import { doHome, doLike, doCollection } from "../../api/article";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const activeKey = ref([1]);
    const listData = ref([]);
    const router = useRouter();

    const talkToAdmin = () => {
      router.push({ path: "/userInfo/messageBox", query: { uid: null } });
    };

    doHome({
      url: "/article/doHome",
      success: (res) => {
        // console.log(res.data);
        for (let i = 0; i < res.data.length; i++) {
          listData.value.push({
            aid: res.data[i].aid,
            title: res.data[i].title,
            description: res.data[i].intr,
            coverImg: res.data[i].coverImg,
            author: res.data[i].uname,
            viewNum: res.data[i].viewNum,
            likeNum: res.data[i].likeNum,
            collectionNum: res.data[i].collectionNum,
            commentNum: res.data[i].commentNum,
          });
        }
        // console.log(listData.value);
      },
      err: (err) => {
        console.log(err);
      },
    });

    const gotoContent = (item) => {
      // console.log(item);
      sessionStorage.setItem("AID", item.aid);
      router.push({ path: "/contentPage" });
    };

    const gotoUserPage = (item) => {
      sessionStorage.setItem("username", item.author);
      router.push({ path: "/user" });
    };

    const like = (item) => {
      // console.log(item.aid);
      doLike({
        url: "/article/doLike",
        aid: item.aid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const collection = (item) => {
      // console.log(item.aid);
      doCollection({
        url: "/article/doCollection",
        aid: item.aid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
      // document.getElementById("likes").style.color = "#1890ff";
    };

    const pagination = {
      onChange: (page) => {
        console.log(page);
      },
      pageSize: 3,
    };

    return {
      listData,
      pagination,
      activeKey,
      like,
      collection,
      gotoContent,
      gotoUserPage,
      talkToAdmin,
    };
  },
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
    EyeOutlined,
  },
});
</script>

<style scoped>
.home {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f1fffd;
}
.body {
  height: auto;
  width: 66%;
  margin: 0 17% 0 17%;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content {
  height: auto;
  width: 70%;
  padding: 20px 20px 0 20px;
  margin: 0;
  min-width: 530px;
  background: #edf9ff;
}
.sider {
  height: auto;
  width: 30%;
  padding: 20px 20px 0 20px;
  margin: 0 0 0 10px;
  min-width: 200px;
  background: #edf9ff;
}
#AsTitle {
  color: black;
}
#AsTitle:hover {
  color: #005177;
  cursor: pointer;
}
</style>